<template>
	<view>
		<PcNavBar></PcNavBar>
		<el-breadcrumb class="breadcrumb-view" separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>项目展示</el-breadcrumb-item>
		</el-breadcrumb>

		<view class="card-view">
			<view class="card-content">
				<view class="project-info">
					<view class="project-name">辽宁中宇纵横融资租赁有限公司债权项目十期Ⅴ号</view>
					<view class="project-cell">
						<view class="cell-item">
							<view class="label-text">预期收益率（年化）</view>
							<view class="desc-text" style="color: #FF695B;">9-9.9%</view>
						</view>
						<view class="cell-item">
							<view class="label-text">发行规模（万元）</view>
							<view class="desc-text">7000</view>
						</view>
						<view class="cell-item">
							<view class="label-text">项目期限（月）</view>
							<view class="desc-text">十八</view>
						</view>
						<view class="cell-item">
							<view class="label-text">起投金额（万元）</view>
							<view class="desc-text">1</view>
						</view>
					</view>
				</view>
				<view class="project-options">
					<view class="project-money">
						<view class="project-label">预约金额</view>
						<view class="money-input">
							<input class="input-css" placeholder-class="plac-css" placeholder="请输入预约金额" />
							<view class="unit-text">万元</view>
						</view>
					</view>
					<view class="project-switch">
						<view class="project-label">是否需要纸质协议</view>
						<view class="switch-view">
							<el-switch v-model="isSwitch" active-color="#FF695B" inactive-color="#999999">
							</el-switch>
							<view class="unit-text" :style="{'color': isSwitch ?'#FF695B' : '#999999'}">
								{{isSwitch ? '是' : '否'}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="card-desc">
				<view class="desc-view">
					<view class="desc-title">【受托】诺众受托资产管理项目</view>
					<view class="desc-text">发行时间</view>
					<view class="desc-text">2023/3/24</view>
				</view>
				<view class="button-view">
					<view class="button-item">充值购买</view>
					<view class="button-item button-active">预约登记</view>
				</view>
			</view>
		</view>
		<view class="card-detail">
			asda
		</view>
		<view style="height: 50px;"></view>
		<Footer></Footer>
	</view>
</template>

<script>
	export default {
		name: "PCProjectDetail",
		data() {
			return {
				isSwitch: false
			};
		}
	}
</script>

<style scoped lang="scss">
	.card-view {
		width: 1200px;
		margin: 0 auto;
		background: white;
		border-radius: 8px;

		.card-content {
			width: 100%;
			padding: 0 50px;
			padding-top: 50px;
			@extend .row-between;

			.project-info {
				width: calc(100% / 2);

				.project-name {
					width: 100%;
					font-weight: 600;
					font-size: 24px;
					color: #1F0C00;
					@extend .text-dot;
				}

				.project-cell {
					width: 100%;
					@extend .row-start;
					margin-top: 21px;

					.cell-item {

						color: #1F0C00;

						.label-text {
							font-weight: 400;
							font-size: 14px;
						}

						.desc-text {
							font-size: 28px;
						}
					}

					.cell-item+.cell-item {
						margin-left: 30px
					}
				}
			}

			.project-options {
				@extend .row;
				align-items: flex-start;

				.project-money {
					@extend .column;
					align-items: flex-end;

					.project-label {
						padding-right: 24px;
						font-size: 14px;
						color: #1F0C00;
					}

					.money-input {
						width: 200px;
						height: 52px;
						background: #F6F6F6;
						border-radius: 26px;
						@extend .row;
						padding: 0 24px;
						margin-top: 14px;

						.input-css {
							flex: 1;
							height: 100%;
							font-weight: 400;
							font-size: 14px;
						}

						.plac-css {
							font-weight: 400;
							font-size: 14px;
							color: #969595;
						}

						.unit-text {
							font-size: 14px;
							color: #1F0C00;
							margin-left: 10px;
						}
					}
				}

				.project-switch {
					@extend .column;
					align-items: flex-end;
					margin-left: 54px;

					.project-label {
						font-size: 14px;
						color: #1F0C00;
					}

					.switch-view {
						@extend .row;
						margin-top: 23px;

						.unit-text {
							font-weight: 600;
							font-size: 22px;
							color: #FF453B;
							margin-left: 5px;
						}
					}
				}
			}
		}

		.card-desc {
			width: calc(100% - 100px);
			margin: 0 auto;
			padding: 23px 0;
			margin-top: 22px;
			@extend .row-between;
			border-top: 1px solid #E8DED6;

			.desc-view {
				.desc-title {
					font-weight: 500;
					font-size: 16px;
					color: #1F0C00;
					margin-bottom: 9px;
				}

				.desc-text {
					font-weight: 400;
					font-size: 16px;
					color: #1F0C00;
				}
			}

			.button-view {
				@extend .row;

				.button-item {
					width: 148px;
					height: 54px;
					background: #FFFFFF;
					border-radius: 8px;
					border: 1px solid #FF453B;
					font-weight: 400;
					font-size: 14px;
					color: #FF453B;
					@extend .column;
				}

				.button-active {
					background: #FF453B;
					color: white;
				}

				.button-item+.button-item {
					margin-left: 13px;
				}
			}
		}
	}

	.card-detail {
		width: 1200px;
		min-height: calc(100vh - 400px);
		margin: 0 auto;
		background: white;
		border-radius: 8px;
		margin-top: 30px;
		padding: 50px;

	}
</style>